<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form :inline="true" :model="query" @keyup.enter.native="toQuery()">
        <!-- 搜索 -->
        <el-form-item label="用户id：">
          <el-input v-model="query.uid" placeholder="用户id" clearable />
        </el-form-item>
        <el-form-item label="下单人：">
          <el-input v-model="query.name" placeholder="退款人" clearable />
        </el-form-item>
        <!--              <div class="block">-->
        <span class="demonstration">选择时间：</span>
        <el-date-picker
          v-model="chooseDate"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          clearable
        />
        <!--        <el-form-item label="状态：">-->
        <!--          <el-select v-model="query.status" placeholder="状态" clearable style="width: 130px;">-->
        <!--            <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="充值类型：">-->
        <!--          <el-select v-model="query.rechargeType" placeholder="充值类型" clearable style="width: 130px;">-->
        <!--            <el-option v-for="item in queryRechargeTypeOptions" :key="item.key" :label="item.display_name"-->
        <!--                       :value="item.key"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item style="margin-left: 1%">
          <el-button type="primary" @click="toQuery()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetQuery()">刷新</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="info"
            icon="el-icon-download"
            size="small"
            @click="handleExport"
          >导出
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            :disabled="multiple"
            @click="handleDelete"
          >批量删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表单组件-->
    <!--    <eForm ref="form" :is-add="isAdd"/>-->
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="data"
      size="small"
      border
      style="width: 100%;text-align-all: center"
      :header-cell-style="{background:'#EAE9E9FF'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column prop="uid" label="用户id" width="70%" />
      <el-table-column prop="nickname" label="退款人" />
      <el-table-column prop="refundTradeNo" label="退款流水号" />
      <el-table-column prop="tradeNo" label="原始流水号" />
      <el-table-column prop="price" label="退款金额" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 2" style="color: #13ce66;font-weight: bold">
            退款成功
          </div>
          <!--          <div v-if="scope.row.status === -1" style="color: black;">-->
          <!--            退款失败-->
          <!--          </div>-->
          <!--          <div v-if="scope.row.status === 0" style="color: red;font-weight: bold">-->
          <!--            待审核-->
          <!--          </div>-->
        </template>
      </el-table-column>
      <el-table-column
        label="管理"
        align="center"
        width="240px"
      >
        <template slot-scope="scope">
          <!--          <el-button size="mini" type="success" @click="success(scope.row.id)" v-if="scope.row.status === 0">通过-->
          <!--          </el-button>-->
          <!--          <el-button size="mini" type="danger" @click="reject(scope.row.id)" v-if="scope.row.status === 0">驳回-->
          <!--          </el-button>-->
          <el-button size="mini" type="primary" @click="showDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <show-detail
      v-if="showVisible"
      ref="showDetail"
      @refreshDataList="toQuery"
    />
  </div>
</template>

<script>
import showDetail from './showDetail'
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del, exportRefund } from '@/api/ums/userRecharge'
// import { del, exporRecord } from '@/api/ums/refundRecord'
// import eForm from './form'
import { downloadFile, formatTimeTwo } from '@/utils/index'

export default {
  components: { showDetail },
  mixins: [initData],
  data() {
    const shortcuts = {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    }
    return {
      showVisible: false,
      delLoading: false,
      // 非多个禁用
      multiple: true,
      chooseDate: [],
      pickerOptions: shortcuts,
      queryTypeOptions: [
        { key: '-1', display_name: '审核拒绝' },
        { key: '0', display_name: '待审核' },
        { key: '1', display_name: '审核成功' }
      ],
      // queryRechargeTypeOptions: [
      //   { key: '0', display_name: '正常充值' },
      //   { key: '1', display_name: '保证金' }
      // ],
      selectionId: [],
      dataForm: {
        id: '',
        isDelete: '',
        createBy: '',
        updateBy: '',
        createTime: '',
        updateTime: '',
        remark: '',
        uid: '',
        nickname: '',
        orderSn: '',
        tradeNo: '',
        refundTradeNo: '',
        price: '',
        rechargeMode: '',
        rechargeType: '',
        status: '',
        prove: '',
        applyTime: '',
        examineTime: ''
        // id: '',
        // isDelete: '',
        // createBy: '',
        // updateBy: '',
        // createTime: '',
        // updateTime: '',
        // remark: '',
        // uid: '',
        // nickname: '',
        // afterTradeNo: '',
        // beforeTradeNo: '',
        // price: '',
        // status: '',
      }
    }
  },

  created() {
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    formatTimeTwo,
    checkPermission,
    beforeInit() {
      this.url = 'admin/api/user_recharge/refundList'
      this.params = {
        uid: this.query.uid,
        name: this.query.name,
        // status: this.query.status,
        startTime: this.chooseDate == null ? '' : this.chooseDate[0],
        endTime: this.chooseDate == null ? '' : this.chooseDate[1]
      }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) {
        this.params[type] = value
      }
      return true
    },

    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id ? [row.id] : this.ids
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return del(ids)
      }).then(() => {
        // this.$refs[id].doClose()
        this.toQuery()
        this.$message.success('操作成功')
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const dataForm = this.dataForm
      delete dataForm.pageNum
      delete dataForm.pageSize
      this.$confirm('是否确认导出所有数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportRefund(dataForm)
      }).then(response => {
        downloadFile(response.data, '退款记录数据', 'xls')
      })
    },
    showDetail(id) {
      this.showVisible = true
      this.$nextTick(() => {
        this.$refs.showDetail.init(id)
      })
    },
    reject(id) {
      this.$confirm('是否要驳回编号为"' + id + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return rejectExtract(id)
      }).then(() => {
        // this.$refs[id].doClose()
        this.toQuery()
        this.$message.success('操作成功')
      })
    },

    success(id) {
      this.$confirm('是否通过该提现申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        success(id).then(res => {
          if (res && res.code === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.toQuery()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.query = {}
      this.chooseDate = []
      this.toQuery()
    }

  }
}
</script>

<style scoped>
/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}
</style>
